<template>
    <div class="content" flex="cross:top main:justify">
        <div class="article" id="article" ref="article" v-highlight  >
            <div ref="contentHtml" id="contentHtml" v-html="articleInfo['contentHtml']" ></div>
            <!--  回到顶部      -->
            <scroll-top :top="top" scrollEl="article" right="480px"></scroll-top>
        </div>
        <div class="sideRight">
            <!--  目录      -->
            <side-directory-web ref="directory" :directoryList="mdDirectory"></side-directory-web>
        </div>
    </div>

</template>

<script>
    import { article } from '@/api/apis/auth.js'
    import scrollTop from '@/components/scrollTop'
    import sideDirectoryWeb from '@/components/sideDirectoryWeb'
    export default {
        name: "articleInfoWeb",
        components: {
            scrollTop,
            sideDirectoryWeb
        },
        data() {
            return {
                top:0,
                articleInfo:{},
                // 目录
                mdDirectory:[]
            }
        },
        created() {
        },
        mounted() {
            this.article()
        },
        computed: {},
        methods: {
            article(){
                let param = {
                    articleId:this.$route.query.articleId
                }
                article(param).then(res=>{
                    let { code,data } = res;
                    if(code === 20000 ){
                        setTimeout(()=>{
                            this.articleInfo = data;
                            this.$nextTick(()=>{
                                let imgs = this.$refs.article.getElementsByTagName("img");
                                imgs.forEach((item,index)=>{
                                    item.setAttribute("preview", 0); // value 设值为index 可单张预览
                                    item.setAttribute("preview-text", item.getAttribute("alt"));
                                    this.$previewRefresh();
                                })
                                this.getMdDirectory();
                            })
                        },100)


                    }
                })
            },
            // 获取目录
            getMdDirectory(){
                let contentHtmlChild = this.$refs.contentHtml.childNodes
                let tags =['h1','h2','h3','h4','h5','h6'];
                let hTags = []
                contentHtmlChild.forEach((item,index)=>{
                    let tagIndex = tags.indexOf(item.localName)
                    if(tagIndex != -1){
                        item.setAttribute("id", item.id+index); // v
                        let obj = {
                            tagName:item.localName,
                            level:tagIndex+1,
                            id:item.id,
                            innerText:item.innerText,
                            children:[]
                        }
                        hTags.push(obj)
                    }
                })
                this.mdDirectory = hTags

            },

        },
    }
</script>
<style scoped lang='scss'>
    .content{
        @include boxBase();
        .article{
            height: 100%;
            padding-top: 24px;
            overflow-y: auto;
            background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
            background-size: 20px 20px;
        }
        .sideRight{
            width: 520px;
            height: 100%;
            overflow-y: auto;
            padding: 24px 0;
        }
    }

</style>
